import React, { useEffect, useState } from 'react';
import { Form, Input, Button, Space, Select, Tooltip, Col } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { useRequest, useUpdateEffect } from '@umijs/hooks';
import { apiBankAccountGetList } from '@/services/otherServices';
import { adminCompanyType } from '@/utils/constant';

const Search = (props: any) => {
  const [form] = Form.useForm();
  const {
    callbackValue,
    callbackSearch,
    balanceValue,
    loading: pageLoading,
  } = props;
  const [data, setData] = useState([]);
  const [searchValue, setSearchValue] = useState('');
  const onReset = () => {
    form.resetFields();
  };
  const onFinish = (values: any) => {
    callbackValue(values);
  };

  const { loading, run } = useRequest(apiBankAccountGetList, {
    manual: true,
    throttleInterval: 500,
    onSuccess: (res, params) => {
      setData(res.data);
    },
  });

  useUpdateEffect(() => {
    run({
      account: searchValue,
      pageNo: 1,
      pageSize: 10,
    });
  }, [searchValue]);

  useEffect(() => {
    run({
      pageNo: 1,
      pageSize: 10,
    });
  }, []);

  return (
    <Form
      style={{ display: 'flex' }}
      form={form}
      name="control-hooks"
      onFinish={onFinish}
    >
      <Space>
        <Form.Item name="account" style={{ margin: 0, width: 240 }}>
          <Select
            allowClear
            style={{ width: 240 }}
            showSearch
            onSearch={value => {
              setSearchValue(value);
            }}
            onSelect={value => {
              const result: any = data?.filter((n: any) => n.account === value);
              callbackSearch(result[0].id);
            }}
            filterOption={false}
            placeholder="选择选择卡号"
          >
            {data &&
              data.map((item: any) => (
                <Select.Option key={item.account} value={item.account}>
                  {item.account}
                </Select.Option>
              ))}
          </Select>
        </Form.Item>

        <Form.Item name="company" style={{ margin: 0, width: 240 }}>
          <Select placeholder="请选择分公司">
            {adminCompanyType.map(item => (
              <Select.Option key={item.value} value={item.value}>
                {item.label}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item name="reciprocalAccount" style={{ margin: 0, width: 240 }}>
          <Input placeholder="请填写对方户名" />
        </Form.Item>

        <Form.Item style={{ margin: 0 }}>
          <Space>
            <Tooltip title="搜索">
              <Button
                disabled={pageLoading}
                type="primary"
                htmlType="submit"
                icon={<SearchOutlined />}
              />
            </Tooltip>
          </Space>
        </Form.Item>

        <span style={{ fontSize: 16, marginLeft: 30, color: '#000' }}>
          {balanceValue !== undefined ? `余额 : ${balanceValue}` : undefined}
        </span>
      </Space>
    </Form>
  );
};

export default Search;
